<template>
	<view class="white">
		<u-navbar :is-back="false" :border-bottom="false" :background="{ background: '#CC0001' }">
			<view class="slot-wrap flex align-center" style="color: #FFFFFF;">
				<text class="cuIcon-back" @click="Back"></text>
				订单详情
			</view>
		</u-navbar>
		<view class="main">
			<view class="main-top bg-orange">
				<view class="text-heat">待付款中···</view>
				<view class="text-explain">订单会在30分钟之内自动关闭</view>
			</view>
			<view class="main-content-img " v-for="(vo, i) in 1" :key="i">
				<view class="flex">
					<image src="../../static/images/banren.png" mode="aspectFill"></image>
					<view class="xingxi">
						<view class="name">中华墨坊课程介绍2</view>
						<!-- <view class="sm">{{vo.appointment}}</view> -->
						<view class="grey text-orange text-bold">¥<text>2980</text>

						</view>
					</view>
				</view>
				<view class="moneys">
					X1
				</view>
			</view>
			<view class="jiage">
				<view class="u-flex justify-between">
					<view class="u-font-28">
						产品金额
					</view>
					<view class="u-font-24">
						￥<text class="u-font-28">2980.00</text>
					</view>
				</view>
				<view class="u-flex justify-between">
					<view class="">
						优惠抵扣
					</view>
					<view class="">
						￥0.00
					</view>
				</view>
			</view>
			<view class="zhongjia u-flex justify-between text-bold">
				<view class="">
					实际支付
				</view>
				<view class="u-font-24 text-orange">
					￥<text class="u-font-36 ">2980</text>
				</view>
			</view>
			<view class="main-bottom">
				<view class="information text-bold">
					<view>订单编号：1569552056002850328</view>
					<view>下单时间：2020/07/17 10:37:55</view>
					<view>支付时间：2020/07/17 10:37:55</view>
					<view>备注：无</view>
				</view>
			</view>
		</view>
		<u-gap height="150"></u-gap>
		<view class="u-flex justify-between bottom">
			<view class="u-font-32 text-orange text-bold">
				￥<text>2980.00</text>
			</view>
			<view class="cu-btn bg-orange u-font-32">
				去付款
			</view>
		</view>
		<view class="u-flex justify-end bottom" v-if="0">
			<!-- <view class="u-font-32 text-orange text-bold">
				￥<text>2980.00</text>
			</view> -->
			<view class="cu-btn bg-orange u-font-32">
				确认完成
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			Back(){
				uni.navigateBack({
				});
			}
		}
	}
</script>

<style lang="scss">
	.orange {
		color: #FF492E;
	}

	.padding {
		padding: 0 30rpx;
	}

	.main-top {
		width: 100%;
		height: 222rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 1;
	}

	.main-top image {
		width: 100%;
		height: 222rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.main-top view {
		color: #FFFFFF;
		padding: 0 30rpx;
	}

	.text-heat {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 12rpx;
	}

	.text-explain {
		font-size: 24rpx;
	}

	.position {
		display: flex;
		background-color: #FFFFFF;
		padding: 30rpx;
	}

	.position image {
		width: 32rpx;
		height: 32rpx;
	}

	.position view {
		font-size: 32rpx;
		margin-right: 40rpx;
		font-weight: 800;
	}

	.main-content-img {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		background-color: #FFFFFF;
		image {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			margin: 10rpx;
		}
	}

	.xingxi {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;

		view {
			font-size: 26rpx;
		}

		.name {
			color: #333333;
			font-size: 30rpx;
		}

		.sm {
			font-weight: 400;
			color: #666666;
		}
	}

	.moneys {
		font-size: 26rpx;
		padding: 0 0 14rpx 32rpx;
	}

	.payment {
		display: flex;
		flex-direction: row-reverse;
		margin: 20rpx 20rpx 20rpx 20rpx;
		font-size: 28rpx;
	}

	.main-text {
		margin: 20rpx 0;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.main-text>view {
		display: flex;
		padding: 20rpx 0;
	}

	.main-text .main-text-bottom {
		justify-content: flex-end;
	}

	.main-text-bottom view {
		margin-left: 30rpx;
		font-weight: 800;
	}

	.main-bottom {
		background-color: #FFFFFF;
	}

	.information {
		padding: 20rpx;
		border-bottom: 2rpx #E8E8E8 solid;
	}

	.information view {
		color: #999999;
	}

	.information view+view {
		margin-top: 20rpx;
	}

	.bottom-select {
		display: flex;
		flex-direction: row-reverse;
		padding: 30rpx 20rpx;
	}

	.bottom-select button {
		width: 200rpx;
		height: 66rpx;
		line-height: 64rpx;
		border-radius: 70rpx;
		background-color: #CCCCCC;
		margin-left: 20rpx;
		padding: 0 25rpx;
		border: 0 !important;
		color: #FFFFFF;
	}
	.jiage{
		padding: 30rpx;
		color: #666;
		border-top: 2rpx solid #F4F4F4;
		border-bottom: 2rpx solid #F4F4F4;
		>view+view{
			margin-top: 26rpx;
		}
	}
	.zhongjia{
		padding: 30rpx;
		color: #333;
		border-bottom: 2rpx solid #F4F4F4;
	}
	.bottom{
		width: 100%;
		position: fixed;
		bottom: 0;
		padding: 30rpx;
		box-shadow: 0px 0px 28rpx 2rpx rgba(111,111,111,0.14);
		.u-font-32{
			text{
				font-size: 60rpx;
			}
		}
		.cu-btn{
			width: 287rpx;
			height: 82rpx;
			border-radius: 8rpx;
		}
	}
</style>
